<template>
	<view class="body" :style="'height:'+height+'px'">
		
		<!-- #ifdef MP-WEIXIN -->
		<image class="top" src="../../static/login/login.svg"></image>
		<!-- #endif -->
		
		<u-button :ripple="true"  type="primary" ripple-bg-color="rgba(255,255,255,.7)" 
		style="font-weight: bold;color:#FFFFFF;background: rgba(255,255,255,.2);"
		 class="login_button" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber">
			<u-icon name="phone-fill" style="position: absolute;color:#FFFFFF;left: 60rpx;font-size: 45rpx;"></u-icon>
			绑定手机号码
		</u-button>
	</view>
</template>

<script>
	import hair from "../../js/hairColorRequest.js";
	
	let data = {
		height: 0,
		userInfo: ''
	};
	export default {
		data() {
			return data;
		},
		mounted() {
			uni.getSystemInfo({
				success: function(res) {
					data.height = res.windowHeight;
				}
			});
		},
		methods:{
			bindPhoneNumber:function(res){
				console.log(res);
				hair.bindPhoneNumber(res);
			}
		}
	}
</script>

<style lang="scss">
	.body{
		background-image: linear-gradient($global-color-opacity, $global-color);
	}
	
	.top{
		position: fixed;
		width: 300rpx;
		top:400rpx;
		left:225rpx;
		
	}
	
	.login_button {
		position: fixed;
		width: 400rpx;
		/* #ifndef MP-WEIXIN */
		height: 400rpx;
		font-size: 30rpx;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .2),0 10rpx 10rpx rgba(0, 0, 0, .2) inset;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		border-radius: 55%;
		/* #endif */
	
		/* #ifdef MP-WEIXIN */
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .2);
		border-radius: 50rpx;
		/* #endif */
	
		/* #ifdef MP-WEIXIN */
		top: 850rpx;
		left: 50%;
		transform: translateX(-50%);
		/* #endif */

		/* #ifndef MP-WEIXIN */
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		/* #endif */

	}
	
	.login_button:active {
		box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, .2);
		font-size: 29rpx;
		
		/* #ifdef MP-WEIXIN */
		box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, .2);
		/* #endif */

	}
	
</style>
